<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>Sticky footer &middot; Twitter Bootstrap</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- CSS -->
    <link href="/media/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
    <link href='http://fonts.googleapis.com/css?family=IM+Fell+Great+Primer' rel='stylesheet' type='text/css'>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <style type="text/css">
        /* Sticky footer styles
      -------------------------------------------------- */
        
        html, body
        {
            height: 100%; /* The html and body elements cannot have any padding or margin. */
        }
        
        /* Wrapper for page content to push down footer */
        #wrap
        {
            min-height: 100%;
            height: auto !important;
            height: 100%; /* Negative indent footer by it's height */
            margin: 30px auto -60px;
   
        }
        
        /* Set the fixed height of the footer here */
        #header, #footer
        {
            height: 100px;
        }
        
        #header 
        {
           background-image:url('/media/img/webhead.png');
           border-bottom:0px;
        }
        
        #footer 
        {
           background-image:url('/media/img/webfoot.png');
           border-bottom:0px;
        }
        
        #header .name1  
        {
            position:relative;
            top:40px;
            left:30px;
            width:300px;
            font-family: Garamond, serif;
            font-size:28pt;
            
        }
        #header .name2  
        {
            position:relative;
            top:20px;
            left:470px;
            width:300px;
            font-family: Garamond, serif;
            color:#A6A6A6;
            font-size:15pt;
        }
        
        .address 
        {
            
            position:relative;
            top:30px;
            left:470px;
            width:400px;
            font-family: Garamond, serif;
            color:#A6A6A6;
            font-size:10pt;
        }
        
        
        /* Lastly, apply responsive CSS fixes as necessary */
        /*
      @media (max-width: 767px) {
        #footer {
          margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px;
        }
      }
      */
        
        
        /* Custom page CSS
      -------------------------------------------------- */
        /* Not required for template or sticky footer method. */
        
        .container
        {
            width: auto;
            max-width: 880px;
        }
        .container .credit
        {
            margin: 20px 0;
        }
        
        #center
        {
            height: 500px;
        }
        
        #contents 
        {
	    width:700px;
        }
        
        #menuBar
        {
            margin-top:-30px;
            width: 100px;
        }
        
        #menu 
        {
            border: 0px;
        }
        
        .welcome 
        {
            margin-top:5px;
            text-align: center;
            font-family: Garamond, serif;
            font-size:30pt;
            font-weight:bold;
        }
        
        .logo 
        {
            float:left;
             background-image:url('/media/img/logo.png');
             margin-top:30px;
             width:263px;
             height:386px;
        
        }
        
        .mainContent 
        {
            margin-top:30px;
            float:left;

        }
    </style>
    <link href="/media/css/bootstrap-responsive.css" rel="stylesheet">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script>
        $(function () {
            $("#menu").menu();
        });
    </script>
</head>
<body>
    <!-- Part 1: Wrap all page content here -->
    <div id="wrap">
        <!-- Begin page content -->
        <div class="container">
        
            <div id="header" class="page-header">
                <div class="name1">
                    C S P C L A B</div>
                <div class="name2">
                   Sogang University</div>
            </div>
            <div id="center" class="center row">
            
                <div id="menuBar" class="menu span1">
                    <ul id="menu">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Board</a>
                            <ul>
                                <li><a href="#">.. ...</a></li>
                                <li><a href="#">....</a></li>
                            </ul>
                        </li>
                        <li><a href="#">...</a></li>
                    </ul>
                </div>
                <div id="contents" class="span7">
		   {% block content %}{% endblock %} 
                </div>
                
            </div>
            <div id="footer">
                <div class="container">
                   <div class="address">
                    Sogang University Department of Computer Science and Engineering</br>
                    서울특별시 마포구 백범로 35 리찌과학관(R관) 914호
                   </div>
                </div>
            </div>
        </div>
</body>
</html>

